<!--
  组件名称：Bottom.vue
  功能描述：这个组件用于显示共有的底部备注信息。
-->
<template>
    <div class="main">
        <div class="title">
            <div>
                <div class="contact">马上联系我们</div>
                <div class="logo">
                    <i class="iconfont">&#xe6f4;</i>
                </div>
                <div class="logo">
                    <i class="iconfont">&#xe870;</i>
                </div>
                <div class="logo">
                    <i class="iconfont">&#xe666;</i>
                </div>
                <div class="logo">
                    <i class="iconfont">&#xe621;</i>
                </div>
            </div>
        </div>
        <div class="top">
            <div class="outer">
                <UlLi>
                    <template v-slot:default>
                        <h3>物流服务</h3>
                        <ul>
                            <li>即时配送</li>
                            <li>跨地服务</li>
                            <li>快运服务</li>
                            <li>国际服务</li>
                            <li>冷运服务</li>
                        </ul>
                    </template>
                </UlLi>
                <UlLi>
                    <template v-slot:default>
                        <h3>智慧科技</h3>
                        <ul>
                            <li>产品方案</li>
                        </ul>
                    </template>
                </UlLi>
                <UlLi>
                    <template v-slot:default>
                        <h3>服务支持</h3>
                        <ul>
                            <li>寄件</li>
                            <li>查件</li>
                            <li>服务支持</li>
                            <li>会员权益</li>
                        </ul>
                    </template>
                </UlLi>
                <UlLi>
                    <template v-slot:default>
                        <h3>可持续发展</h3>
                        <ul>
                            <li>企业治理</li>
                            <li>人才伙伴</li>
                            <li>社会关怀</li>
                        </ul>
                    </template>
                </UlLi>
                <UlLi>
                    <template v-slot:default>
                        <h3>投资者关系</h3>
                        <ul>
                            <li>公司公告</li>
                            <li>公司治理</li>
                            <li>投资者联络</li>
                        </ul>
                    </template>
                </UlLi>
                <UlLi>
                    <template v-slot:default>
                        <h3>关于我们</h3>
                        <ul>
                            <li>关于飞鸟</li>
                            <li>服务公告</li>
                            <li>零元采购</li>
                            <li>合作咨询</li>
                        </ul>
                    </template>
                </UlLi>
            </div>
        </div>
        <div class="middle">
            <div class="outer-box">
                <div>
                    <div>飞鸟快运</div>
                    <div>飞鸟国际</div>
                    <div>飞鸟同城急送</div>
                    <div>飞鸟航空</div>
                    <div>飞鸟邮政</div>
                </div>
                <div>
                    <div>飞鸟公益</div>
                    <div>飞修</div>
                    <div>飞鸟园区</div>
                    <div>飞鸟供应链</div>
                    <div>飞鸟物流联网</div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div>
                <div>使用条款</div>
                <div>隐私政策</div>
                <div>服务条款</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
const UlLi = defineAsyncComponent(() => import('@/components/common/UlLi.vue'))
</script>

<style scoped lang="less">
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';  /* Project id 4410292 */
  src: 
       url('//at.alicdn.com/t/c/font_4410292_mw276edc9q.woff2?t=1760775717121') format('woff2'),
       url('//at.alicdn.com/t/c/font_4410292_mw276edc9q.woff?t=1760775717121') format('woff'),
       url('//at.alicdn.com/t/c/font_4410292_mw276edc9q.ttf?t=1760775717121') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 1.5rem;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

.main {
    margin-top: 4vh;
    height: 70vh;
    display: flex;
    flex-direction: column !important;

    .title {
        flex: 1.3;
        background-color: #524747;
        display: flex;
        align-items: center;

        >div:first-child {
            width: 30%;
            height: 80%;
            margin-left: 17vh;
            display: flex;
            .contact {
                flex: 6;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                font-size: 1rem;
                color: white;
               
            }

            .logo {
                flex: 1;
                margin: 12px 10px 0 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 42%;
            }
        }
    }

    .top {
        flex: 8;
        background-color: #373737;
        display: flex;
        justify-content: center;
        align-items: center;

        .outer {
            border-top: 1px solid #575757;
            border-bottom: 1px solid #575757;
            width: 80%;
            height: 90%;

            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
        }
    }

    .middle {
        flex: 2;
        background-color: #373737;
        display: flex;
        justify-content: center;
        align-items: center;

        .outer-box {
            height: 80%;
            width: 80%;

            display: flex;
            flex-direction: column;
            justify-content: space-evenly;

            >div:first-child {
                flex: 1;

                display: flex;
                justify-content: space-evenly;

                >div {
                    width: 10%;

                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 0.8rem;
                    color: white;
                }
            }

            >div:nth-child(2) {
                flex: 1;

                display: flex;
                justify-content: space-evenly;

                >div {
                    width: 10%;

                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 0.8rem;
                    color: white;
                }
            }
        }

    }

    .bottom {
        flex: 2;
        background-color: #2c2c2c;

        >div {
            width: 25%;
            color: #999999;
            height: 40%;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            margin-top: 2vh;
            font-size: 0.6rem;
            margin-left: 10%;

            >div {
                width: 20%;
                border-right: 1px solid #928364;
            }

        }
    }
}

h3 {
    text-align: center;
    padding: 0;
    margin: 0;
    color: white;
}

ul {
    text-decoration: none;
    list-style: none;
    padding: 0;
    margin: 2px 0 0 0;
    li {
        text-align: center;
        font-size: 0.8rem;
        color: #999999;
        margin-top: 1rem;
    }
}</style>